import React, { PureComponent } from 'react'
import './style.css'

export default function withMouseListener(Comp) {
    return class MouseListener extends PureComponent {
        state = {
            x: 0,
            y: 0
        }

        divRef = React.createRef()

        handleMouseMove = (e) => {
            // 更新 x 和 y 的值
            const { left, top } = this.divRef.current.getBoundingClientRect()
            this.setState({
                x: Math.ceil(e.pageX - left),
                y: Math.ceil(e.pageY - top)
            })
        }

        render() {
            console.log(this.props);
            return (
                <div ref={this.divRef} className='point' onMouseMove={this.handleMouseMove}>
                    <Comp {...this.props} x={this.state.x} y={this.state.y} />
                </div>
            )
        }
    }
}
